<template>
  <div class="lawyer-template-page">
    <!-- 导航栏 -->
    <el-header class="header">
      <div class="container">
        <div class="logo">
          <el-icon class="icon"><balance-scale /></el-icon>
          <div class="logo-text">
            <h1>律师事务所</h1>
            <p>专业 · 诚信 · 高效</p>
          </div>
        </div>

        <el-menu
          mode="horizontal"
          :default-active="activeMenu"
          class="nav-menu"
        >
          <el-menu-item index="home">首页</el-menu-item>
          <el-menu-item index="services">服务领域</el-menu-item>
          <el-menu-item index="lawyers">律师团队</el-menu-item>
          <el-menu-item index="templates" class="active">模板中心</el-menu-item>
          <el-menu-item index="contact">联系我们</el-menu-item>
        </el-menu>

        <el-button class="contact-btn" type="primary" round>
          <el-icon><phone /></el-icon>
          咨询热线
        </el-button>
      </div>
    </el-header>

    <!-- 页面标题区 -->
    <section class="page-title">
      <div class="container">
        <h2>法律模板中心</h2>
        <p>提供专业的法律文书模板下载与定制上传服务，助力您的法律事务处理更加高效</p>
        <div class="btn-group">
          <el-button
            type="primary"
            size="large"
            @click="$refs.downloadSection.scrollIntoView({behavior: 'smooth'})"
          >
            <el-icon><download /></el-icon>
            下载模板
          </el-button>
          <el-button
            type="success"
            size="large"
            @click="$refs.uploadSection.scrollIntoView({behavior: 'smooth'})"
          >
            <el-icon><upload /></el-icon>
            上传模板
          </el-button>
        </div>
      </div>
    </section>

    <!-- 主内容区 -->
    <el-main class="main-content">
      <div class="container">
        <!-- 说明提示 -->
        <el-alert
          title="模板使用说明"
          :closable="false"
          description="所有模板仅供参考，具体法律事务请咨询专业律师。上传的模板将经过审核后发布，优质模板提供者将获得我所专业咨询优惠。"
          type="info"
          show-icon
          class="info-alert"
        />

        <div class="content-wrapper">
          <!-- 左侧边栏 - 模板分类 -->
          <div class="sidebar">
            <el-card>
              <div slot="header" class="card-header">
                <el-icon class="icon"><folder-opened /></el-icon>
                <span>模板分类</span>
              </div>

              <el-tree
                :data="templateCategories"
                :props="treeProps"
                :default-expanded-keys="['all']"
                @node-click="handleCategoryClick"
                class="category-tree"
              />

              <div class="usage-guide">
                <div class="guide-header">
                  <el-icon class="icon"><lightbulb /></el-icon>
                  <span>使用指南</span>
                </div>
                <el-descriptions column="1" border>
                  <el-descriptions-item>
                    <template #label><el-icon size="16"><check /></el-icon></template>
                    下载模板后根据实际情况修改
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template #label><el-icon size="16"><check /></el-icon></template>
                    重要法律文件建议咨询律师
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template #label><el-icon size="16"><check /></el-icon></template>
                    上传模板需确保无版权纠纷
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template #label><el-icon size="16"><check /></el-icon></template>
                    优质模板将获得官方推荐
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-card>
          </div>

          <!-- 右侧主内容区 -->
          <div class="main-content-area">
            <!-- 下载模板区域 -->
            <el-card ref="downloadSection" class="content-card">
              <div slot="header" class="card-header">
                <el-icon class="icon"><download /></el-icon>
                <span>可下载模板</span>

                <el-input
                  v-model="searchKeyword"
                  placeholder="搜索模板..."
                  class="search-input"
                  prefix-icon="search"
                />
              </div>

              <!-- 模板列表 -->
              <div class="template-grid">
                <el-card
                  v-for="template in filteredTemplates"
                  :key="template.id"
                  class="template-card"
                >
                  <div class="template-header">
                    <div class="template-icon">
                      <el-icon><document /></el-icon>
                    </div>
                    <div class="template-title">
                      <h3>{{ template.name }}</h3>
                      <p>{{ template.description }}</p>
                    </div>
                    <el-badge
                      v-if="template.tag"
                      :value="template.tag"
                      :type="template.tag === '最新' ? 'success' : 'primary'"
                    />
                  </div>

                  <div class="template-tags">
                    <el-tag
                      v-for="tag in template.tags"
                      :key="tag"
                      size="small"
                      effect="outline"
                    >
                      {{ tag }}
                    </el-tag>
                  </div>

                  <div class="template-footer">
                    <div class="template-stats">
                      <span class="stat-item">
                        <el-icon size="14"><download /></el-icon>
                        {{ template.downloads }}
                      </span>
                      <span class="stat-item">
                        <el-icon size="14"><star /></el-icon>
                        {{ template.rating }}
                      </span>
                    </div>
                    <el-button
                      type="primary"
                      size="small"
                      @click="handleDownload(template)"
                    >
                      <el-icon size="14"><download /></el-icon>
                      下载
                    </el-button>
                  </div>
                </el-card>
              </div>

              <!-- 加载更多 -->
              <div class="load-more">
                <el-button
                  type="primary"
                  plain
                  @click="loadMoreTemplates"
                >
                  加载更多模板
                  <el-icon><bottom /></el-icon>
                </el-button>
              </div>
            </el-card>

            <!-- 上传模板区域 -->
            <el-card ref="uploadSection" class="content-card upload-card">
              <div slot="header" class="card-header">
                <el-icon class="icon"><upload /></el-icon>
                <span>上传模板</span>
              </div>

              <!-- 上传区域 -->
              <el-upload
                class="upload-area"
                action=""
                :on-change="handleFileChange"
                :before-upload="beforeUpload"
                :file-list="fileList"
                :auto-upload="false"
                drag
                multiple
              >
                <el-icon class="upload-icon"><cloud-upload /></el-icon>
                <div class="upload-text">
                  <h3>拖放文件至此处或点击上传</h3>
                  <p>支持 PDF, DOC, DOCX 格式，单个文件不超过 10MB</p>
                </div>
                <el-button type="primary" class="select-file-btn">
                  <el-icon><folder-open /></el-icon>
                  选择文件
                </el-button>
              </el-upload>

              <!-- 上传表单 -->
              <el-form
                v-if="fileList.length > 0"
                :model="uploadForm"
                :rules="uploadRules"
                ref="uploadFormRef"
                label-width="100px"
                class="upload-form"
              >
                <el-form-item label="已选文件" class="file-list-item">
                  <el-list>
                    <el-list-item
                      v-for="(file, index) in fileList"
                      :key="file.uid"
                    >
                      <el-avatar slot="avatar" icon="document" />
                      <div class="file-info">
                        <div class="file-name">{{ file.name }}</div>
                        <el-progress
                          :percentage="100"
                          stroke-width="2"
                          class="file-progress"
                        />
                      </div>
                      <el-button
                        icon="delete"
                        size="small"
                        circle
                        type="text"
                        @click="handleRemoveFile(index)"
                      />
                    </el-list-item>
                  </el-list>
                </el-form-item>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="模板名称" prop="name">
                      <el-input v-model="uploadForm.name" placeholder="请输入模板名称" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="模板分类" prop="category">
                      <el-select
                        v-model="uploadForm.category"
                        placeholder="请选择分类"
                      >
                        <el-option
                          v-for="cat in templateCategories.filter(c => c.id !== 'all')"
                          :key="cat.id"
                          :label="cat.label"
                          :value="cat.id"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="适用场景">
                      <el-input v-model="uploadForm.scenario" placeholder="请描述模板适用场景" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="文件格式">
                      <el-input
                        v-model="uploadForm.format"
                        placeholder="文件格式"
                        readonly
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item label="模板描述" prop="description">
                  <el-input
                    v-model="uploadForm.description"
                    type="textarea"
                    :rows="4"
                    placeholder="请详细描述模板内容、使用方法及注意事项"
                  />
                </el-form-item>

                <el-form-item label="联系人信息">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-input v-model="uploadForm.contactName" placeholder="姓名" />
                    </el-col>
                    <el-col :span="12">
                      <el-input v-model="uploadForm.contactPhone" placeholder="联系电话" />
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item class="form-actions">
                  <el-button
                    type="primary"
                    @click="submitUpload"
                  >
                    提交审核
                    <el-icon><check /></el-icon>
                  </el-button>
                  <el-button
                    @click="resetUploadForm"
                  >
                    取消
                  </el-button>
                </el-form-item>
              </el-form>

              <!-- 上传须知 -->
              <el-alert
                title="上传须知"
                :closable="false"
                description="上传的模板必须为原创或拥有合法授权，不得侵犯他人知识产权；模板内容需符合法律法规要求；提交后将在1-3个工作日内完成审核；优质模板提供者将获得法律咨询优惠券。"
                type="warning"
                show-icon
                class="upload-notice"
              />
            </el-card>
          </div>
        </div>
      </div>
    </el-main>

    <!-- 咨询区域 -->
    <section class="consultation-section">
      <div class="container">
        <el-card class="consultation-card">
          <el-row :gutter="0">
            <el-col :span="12" class="consultation-info">
              <h3>需要专业法律帮助？</h3>
              <p>我们的专业律师团队随时为您提供法律咨询服务，解答您的法律疑问</p>

              <el-descriptions column="1" class="contact-info">
                <el-descriptions-item>
                  <template #label><el-icon><phone /></el-icon></template>
                  <div>
                    <span class="info-title">电话咨询</span>
                    <span class="info-content">400-888-9999</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label><el-icon><message /></el-icon></template>
                  <div>
                    <span class="info-title">邮件咨询</span>
                    <span class="info-content">contact@zhenghonglaw.com</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label><el-icon><location /></el-icon></template>
                  <div>
                    <span class="info-title">律所地址</span>
                    <span class="info-content">XXX</span>
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </el-col>

            <el-col :span="12" class="consultation-form">
              <h3>在线咨询</h3>
              <el-form
                :model="consultForm"
                :rules="consultRules"
                ref="consultFormRef"
                label-width="80px"
              >
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="consultForm.name" placeholder="请输入您的姓名" />
                </el-form-item>

                <el-form-item label="电话" prop="phone">
                  <el-input v-model="consultForm.phone" placeholder="请输入您的联系电话" />
                </el-form-item>

                <el-form-item label="咨询内容" prop="content">
                  <el-input
                    v-model="consultForm.content"
                    type="textarea"
                    :rows="4"
                    placeholder="请简要描述您的法律问题"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    class="submit-consult-btn"
                    @click="submitConsultation"
                  >
                    提交咨询
                    <el-icon><paper-plane /></el-icon>
                  </el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </section>

    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="container">
        <el-row :gutter="40">
          <el-col :span="6">
            <div class="footer-logo">
              <el-icon class="icon"><balance-scale /></el-icon>
              <div class="logo-text">
                <h3>律师事务所</h3>
                <p>专业 · 诚信 · 高效</p>
              </div>
            </div>
            <p class="footer-desc">
              XX律师事务所是一家综合性律师事务所，专注于为客户提供专业、高效的法律服务，擅长处理各类民商事纠纷、刑事辩护等法律事务。
            </p>
            <div class="social-icons">
              <el-link icon="weixin" class="social-icon" />
              <el-link icon="weibo" class="social-icon" />
              <el-link icon="link" class="social-icon" />
            </div>
          </el-col>

          <el-col :span="4">
            <h4 class="footer-title">服务领域</h4>
            <ul class="footer-links">
              <li><a href="#">婚姻家庭法律服务</a></li>
              <li><a href="#">合同纠纷处理</a></li>
              <li><a href="#">知识产权保护</a></li>
              <li><a href="#">企业法律顾问</a></li>
              <li><a href="#">刑事辩护</a></li>
              <li><a href="#">房地产法律服务</a></li>
            </ul>
          </el-col>

          <el-col :span="4">
            <h4 class="footer-title">快速链接</h4>
            <ul class="footer-links">
              <li><a href="#">关于我们</a></li>
              <li><a href="#">律师团队</a></li>
              <li><a href="#">成功案例</a></li>
              <li><a href="#">法律资讯</a></li>
              <li><a href="#">模板中心</a></li>
              <li><a href="#">联系我们</a></li>
            </ul>
          </el-col>

          <el-col :span="6">
            <h4 class="footer-title">联系方式</h4>
            <ul class="contact-details">
              <li>
                <el-icon class="icon"><location /></el-icon>
                <span>XX地址</span>
              </li>
              <li>
                <el-icon class="icon"><phone /></el-icon>
                <span>0351-XXXX</span>
              </li>
              <li>
                <el-icon class="icon"><message /></el-icon>
                <span>contact@zhenghonglaw.com</span>
              </li>
              <li>
                <el-icon class="icon"><timer /></el-icon>
                <span>周一至周五 9:00-18:00</span>
              </li>
            </ul>
          </el-col>
        </el-row>

        <div class="copyright">
          <p>© 2025 律师事务所 版权所有 | ICP备12345678号</p>
          <p>本网站提供的信息仅供参考，不构成法律建议。具体法律问题请咨询专业律师。</p>
        </div>
      </div>
    </el-footer>

    <!-- 下载提示弹窗 -->
    <el-dialog
      title="下载提示"
      :visible.sync="downloadDialogVisible"
      :before-close="handleDownloadDialogClose"
      width="400px"
    >
      <p>您即将下载 {{ currentDownloadTemplate?.name }} 模板</p>
      <p class="dialog-note">
        <el-icon color="#faad14"><warning /></el-icon>
        模板仅供参考，重要法律事务请咨询专业律师
      </p>
      <template #footer>
        <el-button @click="handleDownloadDialogClose">取消</el-button>
        <el-button
          type="primary"
          @click="confirmDownload"
        >
          确认下载
        </el-button>
      </template>
    </el-dialog>

    <!-- 上传成功弹窗 -->
    <el-dialog
      title="提交成功"
      :visible.sync="uploadSuccessDialogVisible"
      :before-close="handleUploadSuccessDialogClose"
      width="400px"
    >
      <div class="success-icon">
        <el-icon color="#52c41a"><check-circle /></el-icon>
      </div>
      <p class="success-message">您的模板已成功提交审核！</p>
      <p class="success-note">我们将在1-3个工作日内完成审核，审核结果将通过短信通知您。</p>
      <template #footer>
        <el-button
          type="primary"
          @click="handleUploadSuccessDialogClose"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import {
  Phone, Download, Upload, FolderOpened,
  Document, Star, Bottom,
  Check, Delete, Search, Warning,
  Message, Location, Timer, Link
} from '@element-plus/icons-vue';

// 导航菜单状态
const activeMenu = ref('templates');

// 模板分类数据
const templateCategories = ref([
  {
    id: 'all',
    label: '全部模板',
    count: 24
  },
  {
    id: 'contract',
    label: '合同协议',
    count: 12
  },
  {
    id: 'lawsuit',
    label: '诉讼文书',
    count: 8
  },
  {
    id: 'personal',
    label: '个人法律文件',
    count: 4
  },
  {
    id: 'company',
    label: '企业法律文件',
    count: 6
  },
  {
    id: 'lawyer',
    label: '律师函模板',
    count: 3
  }
]);

// 树形组件配置
const treeProps = {
  label: 'label',
  children: 'children',
  disabled: 'disabled'
};

// 模板数据
const templates = ref([
  {
    id: 1,
    name: '劳动合同模板',
    description: '企业用工必备合同',
    tags: ['合同协议', '企业用', 'DOC格式'],
    downloads: 1243,
    rating: 4.8,
    category: 'contract',
    tag: '最新'
  },
  {
    id: 2,
    name: '离婚协议书',
    description: '离婚财产分割协议',
    tags: ['合同协议', '个人用', 'PDF格式'],
    downloads: 2876,
    rating: 4.6,
    category: 'contract',
    tag: '热门'
  },
  {
    id: 3,
    name: '借款合同模板',
    description: '个人/企业借款协议',
    tags: ['合同协议', '通用', 'DOCX格式'],
    downloads: 956,
    rating: 4.5,
    category: 'contract'
  },
  {
    id: 4,
    name: '律师函模板',
    description: '催款/维权律师函',
    tags: ['律师函模板', '通用', 'PDF格式'],
    downloads: 732,
    rating: 4.9,
    category: 'lawyer'
  },
  {
    id: 5,
    name: '民事起诉状',
    description: '民事诉讼立案文书',
    tags: ['诉讼文书', '通用', 'DOC格式'],
    downloads: 645,
    rating: 4.7,
    category: 'lawsuit'
  },
  {
    id: 6,
    name: '企业章程模板',
    description: '公司注册必备文件',
    tags: ['企业法律文件', '公司注册', 'DOCX格式'],
    downloads: 421,
    rating: 4.4,
    category: 'company'
  }
]);

// 分页和加载更多
const displayedTemplates = ref(6);
const loadMoreTemplates = () => {
  displayedTemplates.value += 3;
};

// 搜索和筛选
const searchKeyword = ref('');
const selectedCategory = ref('all');

const filteredTemplates = computed(() => {
  return templates.value
    .filter(template => {
      if (selectedCategory.value === 'all') return true;
      return template.category === selectedCategory.value;
    })
    .filter(template => {
      if (!searchKeyword.value) return true;
      const keyword = searchKeyword.value.toLowerCase();
      return (
        template.name.toLowerCase().includes(keyword) ||
        template.description.toLowerCase().includes(keyword) ||
        template.tags.some(tag => tag.toLowerCase().includes(keyword))
      );
    })
    .slice(0, displayedTemplates.value);
});

// 处理分类点击
const handleCategoryClick = (data) => {
  selectedCategory.value = data.id;
  // 重置显示数量
  displayedTemplates.value = 6;
};

// 下载模板相关
const downloadDialogVisible = ref(false);
const currentDownloadTemplate = ref(null);

const handleDownload = (template) => {
  currentDownloadTemplate.value = template;
  downloadDialogVisible.value = true;
};

const handleDownloadDialogClose = () => {
  downloadDialogVisible.value = false;
  currentDownloadTemplate.value = null;
};

const confirmDownload = () => {
  // 模拟下载操作
  console.log(`下载模板: ${currentDownloadTemplate.value.name}`);

  // 显示下载成功提示
  ElMessage.success({
    message: `模板 ${currentDownloadTemplate.value.name} 下载成功`,
    duration: 2000
  });

  handleDownloadDialogClose();
};

// 文件上传相关
const fileList = ref([]);
const uploadFormRef = ref(null);

const uploadForm = reactive({
  name: '',
  category: '',
  scenario: '',
  format: '',
  description: '',
  contactName: '',
  contactPhone: ''
});

const uploadRules = {
  name: [
    { required: true, message: '请输入模板名称', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择模板分类', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入模板描述', trigger: 'blur' },
    { min: 10, message: '描述至少10个字符', trigger: 'blur' }
  ]
};

const handleFileChange = (file, fileList) => {
  // 更新文件列表
  fileList.value = fileList;

  // 提取文件格式
  if (fileList.length > 0) {
    const file = fileList[0];
    const ext = file.name.split('.').pop().toLowerCase();
    uploadForm.format = ext;
  }
};

const beforeUpload = (file) => {
  // 检查文件类型
  const isDoc = file.type === 'application/msword' ||
    file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
  const isPdf = file.type === 'application/pdf';
  const isLt10M = file.size / 1024 / 1024 < 10;

  if (!isDoc && !isPdf) {
    ElMessage.error('只能上传 DOC、DOCX 或 PDF 格式的文件');
    return false;
  }

  if (!isLt10M) {
    ElMessage.error('文件大小不能超过 10MB');
    return false;
  }

  return true;
};

const handleRemoveFile = (index) => {
  fileList.value.splice(index, 1);
  if (fileList.value.length === 0) {
    resetUploadForm();
  }
};

const resetUploadForm = () => {
  uploadFormRef.value.resetFields();
  fileList.value = [];
};

// 上传成功弹窗
const uploadSuccessDialogVisible = ref(false);

const submitUpload = () => {
  uploadFormRef.value.validate((valid) => {
    if (valid) {
      if (fileList.value.length === 0) {
        ElMessage.error('请选择要上传的文件');
        return;
      }

      // 模拟提交
      console.log('提交上传模板:', {
        form: uploadForm,
        files: fileList.value
      });

      // 显示成功弹窗
      uploadSuccessDialogVisible.value = true;

      // 重置表单
      resetUploadForm();
    }
  });
};

const handleUploadSuccessDialogClose = () => {
  uploadSuccessDialogVisible.value = false;
};

// 咨询表单相关
const consultFormRef = ref(null);

const consultForm = reactive({
  name: '',
  phone: '',
  content: ''
});

const consultRules = {
  name: [
    { required: true, message: '请输入您的姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入您的联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入咨询内容', trigger: 'blur' },
    { min: 5, message: '咨询内容至少5个字符', trigger: 'blur' }
  ]
};

const submitConsultation = () => {
  consultFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟提交咨询
      console.log('提交咨询:', consultForm);

      ElMessage.success({
        message: '咨询提交成功，我们会尽快与您联系',
        duration: 2000
      });

      // 重置表单
      consultFormRef.value.resetFields();
    }
  });
};

// 页面加载时初始化
onMounted(() => {
  // 可以在这里加载用户权限或其他初始化数据
});
</script>

<style scoped>
/* 全局样式 */
.lawyer-template-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 导航栏样式 */
.header {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
}

.logo .icon {
  color: #0F3460;
  font-size: 24px;
  margin-right: 10px;
}

.logo-text {
  line-height: 1.2;
}

.logo-text h1 {
  font-size: 18px;
  font-weight: bold;
  color: #0F3460;
  margin: 0;
}

.logo-text p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.nav-menu {
  flex: 1;
  margin: 0 20px;
}

.nav-menu .el-menu-item.active {
  color: #0F3460;
  font-weight: bold;
}

.contact-btn {
  background-color: #1A73E8;
  border-color: #1A73E8;
}

/* 页面标题区 */
.page-title {
  background-color: #0F3460;
  color: #fff;
  padding: 60px 0;
  text-align: center;
}

.page-title h2 {
  font-size: 32px;
  margin-bottom: 15px;
}

.page-title p {
  font-size: 16px;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto 30px;
}

.btn-group .el-button {
  margin: 0 10px;
}

/* 主内容区 */
.main-content {
  flex: 1;
  padding: 40px 0;
  background-color: #f5f7fa;
}

.info-alert {
  margin-bottom: 30px;
}

.content-wrapper {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 260px;
  flex-shrink: 0;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}

.card-header .icon {
  margin-right: 8px;
  color: #0F3460;
}

.category-tree {
  margin-top: 15px;
}

.usage-guide {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.guide-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
}

.guide-header .icon {
  margin-right: 8px;
  color: #0F3460;
}

.main-content-area {
  flex: 1;
}

.content-card {
  margin-bottom: 30px;
}

.search-input {
  width: 300px;
  margin-left: auto;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.template-card {
  transition: all 0.3s ease;
}

.template-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.template-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.template-icon {
  font-size: 24px;
  color: #1A73E8;
  margin-right: 10px;
}

.template-title h3 {
  font-size: 16px;
  margin: 0 0 5px 0;
}

.template-title p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.template-tags {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.template-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item {
  font-size: 12px;
  color: #666;
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.stat-item .el-icon {
  margin-right: 3px;
}

.load-more {
  text-align: center;
  margin-top: 30px;
}

/* 上传区域 */
.upload-card {
  margin-bottom: 0;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 4px;
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #1A73E8;
}

.upload-icon {
  font-size: 48px;
  color: #1A73E8;
  margin-bottom: 15px;
}

.upload-text h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.upload-text p {
  font-size: 12px;
  color: #666;
  margin: 0 0 20px 0;
}

.select-file-btn {
  background-color: #1A73E8;
  border-color: #1A73E8;
}

.upload-form {
  margin-top: 20px;
}

.file-list-item .el-list {
  border: 1px solid #eee;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.file-list-item .el-list-item {
  padding: 10px 15px;
}

.file-info {
  flex: 1;
  margin-left: 10px;
}

.file-name {
  font-size: 14px;
  margin-bottom: 5px;
}

.file-progress {
  width: 100%;
  height: 6px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.form-actions .el-button {
  margin-left: 10px;
}

.upload-notice {
  margin-top: 30px;
}

/* 咨询区域 */
.consultation-section {
  padding: 60px 0;
  background-color: #f0f5ff;
}

.consultation-card {
  overflow: hidden;
  border: none;
}

.consultation-info {
  background-color: #0F3460;
  color: #fff;
  padding: 40px;
}

.consultation-info h3 {
  font-size: 22px;
  margin-bottom: 20px;
}

.consultation-info p {
  margin-bottom: 30px;
  opacity: 0.9;
}

.contact-info .el-descriptions__label {
  color: #fff;
  font-weight: normal;
}

.contact-info .el-descriptions__content {
  color: #fff;
}

.info-title {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.info-content {
  opacity: 0.9;
}

.consultation-form {
  padding: 40px;
}

.consultation-form h3 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #333;
}

.submit-consult-btn {
  width: 100%;
  background-color: #1A73E8;
  border-color: #1A73E8;
}

/* 页脚样式 */
.footer {
  background-color: #1A1A2E;
  color: #fff;
  padding: 60px 0 30px;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.footer-logo .icon {
  color: #fff;
  font-size: 24px;
  margin-right: 10px;
}

.footer .logo-text h3 {
  color: #fff;
  font-size: 18px;
  margin: 0;
}

.footer .logo-text p {
  color: #aaa;
  font-size: 12px;
  margin: 0;
}

.footer-desc {
  color: #aaa;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icon {
  color: #aaa;
  font-size: 18px;
  transition: color 0.3s;
}

.social-icon:hover {
  color: #fff;
}

.footer-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background-color: #1A73E8;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #aaa;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #fff;
}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-details li {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.contact-details .icon {
  color: #1A73E8;
  margin-right: 10px;
  margin-top: 3px;
}

.copyright {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #333;
  text-align: center;
  color: #aaa;
  font-size: 12px;
}

.copyright p {
  margin: 5px 0;
}

/* 弹窗样式 */
.dialog-note {
  color: #faad14;
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.dialog-note .el-icon {
  margin-right: 5px;
}

.success-icon {
  text-align: center;
  margin-bottom: 20px;
}

.success-icon .el-icon {
  font-size: 48px;
}

.success-message {
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
}

.success-note {
  text-align: center;
  color: #666;
  font-size: 14px;
}

/* 响应式样式 */
@media (max-width: 992px) {
  .content-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    margin-bottom: 20px;
  }

  .search-input {
    width: 100%;
    margin-left: 0;
    margin-top: 15px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .consultation-section .el-row {
    flex-direction: column;
  }

  .consultation-info,
  .consultation-form {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .header .container {
    flex-wrap: wrap;
    padding: 10px 20px;
  }

  .nav-menu {
    order: 3;
    width: 100%;
    margin: 10px 0 0 0;
  }

  .contact-btn {
    display: none;
  }

  .template-grid {
    grid-template-columns: 1fr;
  }

  .footer .el-row {
    flex-direction: column;
  }

  .footer .el-col {
    width: 100%;
    margin-bottom: 30px;
  }
}
</style>
